<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rrweb Demo</title><link
  rel="stylesheet"
  href="rrweb.css"
/>
<script src="rrweb.umd.min.cjs"></script>
</head>
<body>
<input type="text" class="a_1_0_4_6_1_right a_1_0_4_6_1_input_css">
  <button id="start">Start Recording</button>
  <button id="stop">Stop Recording</button>
  <button id="play">Play Replay</button>
  <div id="replay" style="border: 1px solid #000; width: 100%; height: 500px;"></div>
  <script>
    window.events = [];

rrweb.record({
  emit(event) {
    // 将 event 存入 events 数组中
    window.events.push(event);
  },
});
function start(eventss){
let test=[
    {
        "type": 0,
        "data": {},
        "timestamp": 1734768414103
    },
    {
        "type": 1,
        "data": {},
        "timestamp": 1734768414105
    },
    {
        "type": 4,
        "data": {
            "href": "file:///C:/Users/Administrator/Desktop/html.html",
            "width": 790,
            "height": 810
        },
        "timestamp": 1734768414105
    },
    {
        "type": 2,
        "data": {
            "node": {
                "type": 0,
                "childNodes": [
                    {
                        "type": 1,
                        "name": "html",
                        "publicId": "",
                        "systemId": "",
                        "id": 2
                    },
                    {
                        "type": 2,
                        "tagName": "html",
                        "attributes": {
                            "lang": "en"
                        },
                        "childNodes": [
                            {
                                "type": 2,
                                "tagName": "head",
                                "attributes": {},
                                "childNodes": [
                                    {
                                        "type": 3,
                                        "textContent": "\n  ",
                                        "id": 5
                                    },
                                    {
                                        "type": 2,
                                        "tagName": "meta",
                                        "attributes": {
                                            "charset": "UTF-8"
                                        },
                                        "childNodes": [],
                                        "id": 6
                                    },
                                    {
                                        "type": 3,
                                        "textContent": "\n  ",
                                        "id": 7
                                    },
                                    {
                                        "type": 2,
                                        "tagName": "meta",
                                        "attributes": {
                                            "name": "viewport",
                                            "content": "width=device-width, initial-scale=1.0"
                                        },
                                        "childNodes": [],
                                        "id": 8
                                    },
                                    {
                                        "type": 3,
                                        "textContent": "\n  ",
                                        "id": 9
                                    },
                                    {
                                        "type": 2,
                                        "tagName": "title",
                                        "attributes": {},
                                        "childNodes": [
                                            {
                                                "type": 3,
                                                "textContent": "rrweb Demo",
                                                "id": 11
                                            }
                                        ],
                                        "id": 10
                                    },
                                    {
                                        "type": 2,
                                        "tagName": "link",
                                        "attributes": {
                                            "rel": "stylesheet",
                                            "href": "file:///C:/Users/Administrator/Desktop/rrweb.css"
                                        },
                                        "childNodes": [],
                                        "id": 12
                                    },
                                    {
                                        "type": 3,
                                        "textContent": "\n",
                                        "id": 13
                                    },
                                    {
                                        "type": 2,
                                        "tagName": "script",
                                        "attributes": {
                                            "src": "file:///C:/Users/Administrator/Desktop/rrweb.umd.min.cjs"
                                        },
                                        "childNodes": [],
                                        "id": 14
                                    },
                                    {
                                        "type": 3,
                                        "textContent": "\n",
                                        "id": 15
                                    }
                                ],
                                "id": 4
                            },
                            {
                                "type": 3,
                                "textContent": "\n",
                                "id": 16
                            },
                            {
                                "type": 2,
                                "tagName": "body",
                                "attributes": {},
                                "childNodes": [
                                    {
                                        "type": 3,
                                        "textContent": "\n",
                                        "id": 18
                                    },
                                    {
                                        "type": 2,
                                        "tagName": "input",
                                        "attributes": {
                                            "type": "text",
                                            "class": "a_1_0_4_6_1_right a_1_0_4_6_1_input_css"
                                        },
                                        "childNodes": [],
                                        "id": 19
                                    },
                                    {
                                        "type": 3,
                                        "textContent": "\n  ",
                                        "id": 20
                                    },
                                    {
                                        "type": 2,
                                        "tagName": "button",
                                        "attributes": {
                                            "id": "start"
                                        },
                                        "childNodes": [
                                            {
                                                "type": 3,
                                                "textContent": "Start Recording",
                                                "id": 22
                                            }
                                        ],
                                        "id": 21
                                    },
                                    {
                                        "type": 3,
                                        "textContent": "\n  ",
                                        "id": 23
                                    },
                                    {
                                        "type": 2,
                                        "tagName": "button",
                                        "attributes": {
                                            "id": "stop"
                                        },
                                        "childNodes": [
                                            {
                                                "type": 3,
                                                "textContent": "Stop Recording",
                                                "id": 25
                                            }
                                        ],
                                        "id": 24
                                    },
                                    {
                                        "type": 3,
                                        "textContent": "\n  ",
                                        "id": 26
                                    },
                                    {
                                        "type": 2,
                                        "tagName": "button",
                                        "attributes": {
                                            "id": "play"
                                        },
                                        "childNodes": [
                                            {
                                                "type": 3,
                                                "textContent": "Play Replay",
                                                "id": 28
                                            }
                                        ],
                                        "id": 27
                                    },
                                    {
                                        "type": 3,
                                        "textContent": "\n  ",
                                        "id": 29
                                    },
                                    {
                                        "type": 2,
                                        "tagName": "div",
                                        "attributes": {
                                            "id": "replay",
                                            "style": "border: 1px solid #000; width: 100%; height: 500px;"
                                        },
                                        "childNodes": [],
                                        "id": 30
                                    },
                                    {
                                        "type": 3,
                                        "textContent": "\n  ",
                                        "id": 31
                                    },
                                    {
                                        "type": 2,
                                        "tagName": "script",
                                        "attributes": {},
                                        "childNodes": [
                                            {
                                                "type": 3,
                                                "textContent": "SCRIPT_PLACEHOLDER",
                                                "id": 33
                                            }
                                        ],
                                        "id": 32
                                    },
                                    {
                                        "type": 3,
                                        "textContent": "\n\n",
                                        "id": 34
                                    }
                                ],
                                "id": 17
                            }
                        ],
                        "id": 3
                    }
                ],
                "id": 1
            },
            "initialOffset": {
                "left": 0,
                "top": 0
            }
        },
        "timestamp": 1734768414143
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 160,
                    "y": 1,
                    "id": 3,
                    "timeOffset": -1
                }
            ]
        },
        "timestamp": 1734768414825
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 156,
                    "y": 8,
                    "id": 17,
                    "timeOffset": -473
                },
                {
                    "x": 150,
                    "y": 11,
                    "id": 19,
                    "timeOffset": -417
                },
                {
                    "x": 147,
                    "y": 14,
                    "id": 19,
                    "timeOffset": -367
                },
                {
                    "x": 139,
                    "y": 19,
                    "id": 19,
                    "timeOffset": -311
                },
                {
                    "x": 140,
                    "y": 19,
                    "id": 19,
                    "timeOffset": -144
                },
                {
                    "x": 244,
                    "y": 27,
                    "id": 21,
                    "timeOffset": -94
                },
                {
                    "x": 728,
                    "y": 59,
                    "id": 30,
                    "timeOffset": -40
                }
            ]
        },
        "timestamp": 1734768415352
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 765,
                    "y": 91,
                    "id": 30,
                    "timeOffset": 0
                }
            ]
        },
        "timestamp": 1734768416944
    },
    {
        "type": 3,
        "data": {
            "source": 2,
            "type": 1,
            "id": 19,
            "x": 109.5999984741211,
            "y": 19.800003051757812
        },
        "timestamp": 1734768417400
    },
    {
        "type": 3,
        "data": {
            "source": 2,
            "type": 5,
            "id": 19
        },
        "timestamp": 1734768417401
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 361,
                    "y": 91,
                    "id": 30,
                    "timeOffset": -454
                },
                {
                    "x": 109,
                    "y": 48,
                    "id": 30,
                    "timeOffset": -397
                },
                {
                    "x": 112,
                    "y": 42,
                    "id": 30,
                    "timeOffset": -341
                },
                {
                    "x": 117,
                    "y": 33,
                    "id": 30,
                    "timeOffset": -285
                },
                {
                    "x": 117,
                    "y": 32,
                    "id": 30,
                    "timeOffset": -189
                },
                {
                    "x": 112,
                    "y": 24,
                    "id": 19,
                    "timeOffset": -133
                },
                {
                    "x": 109,
                    "y": 19,
                    "id": 19,
                    "timeOffset": -45
                }
            ]
        },
        "timestamp": 1734768417453
    },
    {
        "type": 3,
        "data": {
            "source": 2,
            "type": 0,
            "id": 19,
            "x": 109.5999984741211,
            "y": 19.800003051757812
        },
        "timestamp": 1734768417495
    },
    {
        "type": 3,
        "data": {
            "source": 2,
            "type": 2,
            "id": 19,
            "x": 109,
            "y": 19,
            "pointerType": 0
        },
        "timestamp": 1734768417496
    },
    {
        "type": 3,
        "data": {
            "source": 5,
            "text": "s",
            "isChecked": false,
            "id": 19
        },
        "timestamp": 1734768417775
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 111,
                    "y": 19,
                    "id": 19,
                    "timeOffset": -329
                },
                {
                    "x": 140,
                    "y": 28,
                    "id": 19,
                    "timeOffset": -274
                },
                {
                    "x": 186,
                    "y": 39,
                    "id": 30,
                    "timeOffset": -216
                },
                {
                    "x": 193,
                    "y": 39,
                    "id": 30,
                    "timeOffset": -129
                },
                {
                    "x": 229,
                    "y": 49,
                    "id": 30,
                    "timeOffset": -74
                },
                {
                    "x": 287,
                    "y": 63,
                    "id": 30,
                    "timeOffset": -17
                }
            ]
        },
        "timestamp": 1734768417954
    },
    {
        "type": 3,
        "data": {
            "source": 5,
            "text": "ss",
            "isChecked": false,
            "id": 19
        },
        "timestamp": 1734768417982
    },
    {
        "type": 3,
        "data": {
            "source": 5,
            "text": "sss",
            "isChecked": false,
            "id": 19
        },
        "timestamp": 1734768418097
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 316,
                    "y": 65,
                    "id": 30,
                    "timeOffset": -476
                },
                {
                    "x": 353,
                    "y": 68,
                    "id": 30,
                    "timeOffset": -418
                },
                {
                    "x": 454,
                    "y": 84,
                    "id": 30,
                    "timeOffset": -363
                },
                {
                    "x": 633,
                    "y": 95,
                    "id": 30,
                    "timeOffset": -307
                },
                {
                    "x": 752,
                    "y": 106,
                    "id": 30,
                    "timeOffset": -252
                },
                {
                    "x": 760,
                    "y": 107,
                    "id": 30,
                    "timeOffset": -187
                },
                {
                    "x": 766,
                    "y": 103,
                    "id": 30,
                    "timeOffset": -131
                },
                {
                    "x": 774,
                    "y": 98,
                    "id": 30,
                    "timeOffset": -59
                }
            ]
        },
        "timestamp": 1734768418467
    },
    {
        "type": 3,
        "data": {
            "source": 2,
            "type": 6,
            "id": 19
        },
        "timestamp": 1734768418556
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 788,
                    "y": 327,
                    "id": 3,
                    "timeOffset": 0
                }
            ]
        },
        "timestamp": 1734768428744
    },
    {
        "type": 3,
        "data": {
            "source": 2,
            "type": 5,
            "id": 19
        },
        "timestamp": 1734768429172
    },
    {
        "type": 3,
        "data": {
            "source": 2,
            "type": 1,
            "id": 19,
            "x": 102.4000015258789,
            "y": 14.199996948242188
        },
        "timestamp": 1734768429188
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 328,
                    "y": 87,
                    "id": 30,
                    "timeOffset": -450
                },
                {
                    "x": 144,
                    "y": 22,
                    "id": 19,
                    "timeOffset": -392
                },
                {
                    "x": 125,
                    "y": 20,
                    "id": 19,
                    "timeOffset": -312
                },
                {
                    "x": 105,
                    "y": 15,
                    "id": 19,
                    "timeOffset": -256
                },
                {
                    "x": 102,
                    "y": 15,
                    "id": 19,
                    "timeOffset": -169
                }
            ]
        },
        "timestamp": 1734768429249
    },
    {
        "type": 3,
        "data": {
            "source": 2,
            "type": 0,
            "id": 19,
            "x": 102.4000015258789,
            "y": 14.199996948242188
        },
        "timestamp": 1734768429271
    },
    {
        "type": 3,
        "data": {
            "source": 2,
            "type": 2,
            "id": 19,
            "x": 102,
            "y": 14,
            "pointerType": 0
        },
        "timestamp": 1734768429271
    },
    {
        "type": 3,
        "data": {
            "source": 5,
            "text": "sssd",
            "isChecked": false,
            "id": 19
        },
        "timestamp": 1734768429395
    },
    {
        "type": 3,
        "data": {
            "source": 5,
            "text": "sssdd",
            "isChecked": false,
            "id": 19
        },
        "timestamp": 1734768429570
    },
    {
        "type": 3,
        "data": {
            "source": 5,
            "text": "sssddd",
            "isChecked": false,
            "id": 19
        },
        "timestamp": 1734768429737
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 103,
                    "y": 14,
                    "id": 19,
                    "timeOffset": -369
                },
                {
                    "x": 152,
                    "y": 42,
                    "id": 30,
                    "timeOffset": -312
                },
                {
                    "x": 299,
                    "y": 85,
                    "id": 30,
                    "timeOffset": -257
                },
                {
                    "x": 373,
                    "y": 99,
                    "id": 30,
                    "timeOffset": -201
                },
                {
                    "x": 435,
                    "y": 116,
                    "id": 30,
                    "timeOffset": -145
                },
                {
                    "x": 516,
                    "y": 159,
                    "id": 30,
                    "timeOffset": -89
                },
                {
                    "x": 658,
                    "y": 293,
                    "id": 30,
                    "timeOffset": -33
                }
            ]
        },
        "timestamp": 1734768429754
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 742,
                    "y": 370,
                    "id": 30,
                    "timeOffset": -495
                },
                {
                    "x": 788,
                    "y": 412,
                    "id": 3,
                    "timeOffset": -439
                }
            ]
        },
        "timestamp": 1734768430270
    },
    {
        "type": 3,
        "data": {
            "source": 2,
            "type": 6,
            "id": 19
        },
        "timestamp": 1734768430309
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 788,
                    "y": 395,
                    "id": 3,
                    "timeOffset": 0
                }
            ]
        },
        "timestamp": 1734768442144
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 757,
                    "y": 371,
                    "id": 30,
                    "timeOffset": -455
                },
                {
                    "x": 754,
                    "y": 367,
                    "id": 30,
                    "timeOffset": -373
                },
                {
                    "x": 750,
                    "y": 358,
                    "id": 30,
                    "timeOffset": -317
                },
                {
                    "x": 739,
                    "y": 339,
                    "id": 30,
                    "timeOffset": -262
                },
                {
                    "x": 732,
                    "y": 286,
                    "id": 30,
                    "timeOffset": -206
                },
                {
                    "x": 729,
                    "y": 254,
                    "id": 30,
                    "timeOffset": -149
                },
                {
                    "x": 731,
                    "y": 186,
                    "id": 30,
                    "timeOffset": -94
                },
                {
                    "x": 735,
                    "y": 33,
                    "id": 30,
                    "timeOffset": -38
                }
            ]
        },
        "timestamp": 1734768442654
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 737,
                    "y": 14,
                    "id": 17,
                    "timeOffset": -190
                },
                {
                    "x": 602,
                    "y": 427,
                    "id": 30,
                    "timeOffset": -135
                },
                {
                    "x": 523,
                    "y": 735,
                    "id": 3,
                    "timeOffset": -79
                }
            ]
        },
        "timestamp": 1734768443158
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 759,
                    "y": 655,
                    "id": 3,
                    "timeOffset": 0
                }
            ]
        },
        "timestamp": 1734768444146
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 764,
                    "y": 529,
                    "id": 30,
                    "timeOffset": 0
                }
            ]
        },
        "timestamp": 1734768447520
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 572,
                    "y": 763,
                    "id": 3,
                    "timeOffset": -448
                }
            ]
        },
        "timestamp": 1734768448023
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 711,
                    "y": 791,
                    "id": 3,
                    "timeOffset": 0
                }
            ]
        },
        "timestamp": 1734768451096
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 677,
                    "y": 567,
                    "id": 3,
                    "timeOffset": 0
                }
            ]
        },
        "timestamp": 1734768468426
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 596,
                    "y": 678,
                    "id": 3,
                    "timeOffset": -456
                },
                {
                    "x": 584,
                    "y": 717,
                    "id": 3,
                    "timeOffset": -399
                },
                {
                    "x": 567,
                    "y": 737,
                    "id": 3,
                    "timeOffset": -344
                },
                {
                    "x": 535,
                    "y": 783,
                    "id": 3,
                    "timeOffset": -288
                },
                {
                    "x": 441,
                    "y": 769,
                    "id": 3,
                    "timeOffset": -232
                },
                {
                    "x": 359,
                    "y": 768,
                    "id": 3,
                    "timeOffset": -176
                },
                {
                    "x": 324,
                    "y": 775,
                    "id": 3,
                    "timeOffset": -120
                },
                {
                    "x": 287,
                    "y": 796,
                    "id": 3,
                    "timeOffset": -64
                }
            ]
        },
        "timestamp": 1734768468936
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 393,
                    "y": 796,
                    "id": 3,
                    "timeOffset": 0
                }
            ]
        },
        "timestamp": 1734768469881
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 524,
                    "y": 555,
                    "id": 3,
                    "timeOffset": -448
                },
                {
                    "x": 561,
                    "y": 518,
                    "id": 30,
                    "timeOffset": -361
                },
                {
                    "x": 560,
                    "y": 523,
                    "id": 30,
                    "timeOffset": -305
                },
                {
                    "x": 559,
                    "y": 532,
                    "id": 30,
                    "timeOffset": -248
                },
                {
                    "x": 592,
                    "y": 555,
                    "id": 3,
                    "timeOffset": -193
                },
                {
                    "x": 623,
                    "y": 501,
                    "id": 30,
                    "timeOffset": -137
                },
                {
                    "x": 788,
                    "y": 314,
                    "id": 3,
                    "timeOffset": -81
                }
            ]
        },
        "timestamp": 1734768470385
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 592,
                    "y": 0,
                    "id": 3,
                    "timeOffset": -21
                }
            ]
        },
        "timestamp": 1734768470885
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 388,
                    "y": 672,
                    "id": 3,
                    "timeOffset": -469
                },
                {
                    "x": 332,
                    "y": 806,
                    "id": 3,
                    "timeOffset": -334
                },
                {
                    "x": 296,
                    "y": 762,
                    "id": 3,
                    "timeOffset": -282
                },
                {
                    "x": 273,
                    "y": 726,
                    "id": 3,
                    "timeOffset": -225
                },
                {
                    "x": 282,
                    "y": 563,
                    "id": 3,
                    "timeOffset": -170
                },
                {
                    "x": 226,
                    "y": 172,
                    "id": 30,
                    "timeOffset": -113
                }
            ]
        },
        "timestamp": 1734768471393
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 182,
                    "y": 22,
                    "id": 21,
                    "timeOffset": -236
                },
                {
                    "x": 373,
                    "y": 667,
                    "id": 3,
                    "timeOffset": -178
                }
            ]
        },
        "timestamp": 1734768471899
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 432,
                    "y": 803,
                    "id": 3,
                    "timeOffset": 0
                }
            ]
        },
        "timestamp": 1734768518569
    },
    {
        "type": 3,
        "data": {
            "source": 1,
            "positions": [
                {
                    "x": 703,
                    "y": 639,
                    "id": 3,
                    "timeOffset": -450
                }
            ]
        },
        "timestamp": 1734768519073
    }
];
const replayer = new rrweb.Replayer(test);
replayer.play();
}
  </script>
</body>
</html>